<template>
  <div class="my-model-viewer">
    <model-viewer
      id="myModel"
      src="NeilArmstrong.glb"
      ar
      ar-modes="webxr scene-viewer"
      shadow-intensity="1"
      camera-controls
      auto-rotate
      touch-action="pan-y"
    >
    </model-viewer>
    <div class="viewe-helper" id="viewe-helper"></div>
  </div>
</template>
<script setup>
import "@google/model-viewer";
import HelloWorld from "./components/HelloWorld.vue";
import * as THREE from "three";
import { ViewHelper } from "three/examples/jsm/helpers/ViewHelper.js";
import { nextTick, onMounted } from "vue";

onMounted(() => {
  nextTick(() => {
    const modelViewer = document.querySelector("#myModel");
    // 监听模型加载完成事件
    modelViewer.addEventListener("model-visibility", async (event) => {
      const symbolKeys = Object.getOwnPropertySymbols(event.target);
      console.log("symbolKeys", symbolKeys);

      let rootSymbolKey = null;
      for (const sym of symbolKeys) {
        if (sym.toString() === "Symbol(scene)") {
          rootSymbolKey = sym;
          break;
        }
      }
      const scene = event.target[rootSymbolKey];
      // console.log("scene", scene);
      const model = scene.model;
      const camera = scene.camera;

      // // 创建坐标轴辅助工具（长度参数可调整）
      // const axesHelper = new THREE.AxesHelper(1); // 1米长的坐标轴

      // // 将坐标系设置为模型中心
      // axesHelper.position.set(0, 0, 0);
      const renderer = new THREE.WebGLRenderer();
      // renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      const dom = document.getElementById("viewe-helper");

      // 创建 ViewHelper 实例
      const viewHelper = new ViewHelper(camera, dom);

      // 添加到场景
      scene.add(viewHelper);

      // 强制渲染更新
      modelViewer.dismissPoster();
    });
  });
});
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.my-model-viewer {
  width: 700px;
  height: 700px;
  position: relative;
}
.my-model-viewer #myModel {
  width: 100%;
  height: 100%;
}
.viewe-helper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border: 1px solid;
}
</style>
